<!--
 * @Description:
 * @Author: FangYaoTang
 * @Date: 2023-08-16 09:18:16
 * @LastEditor: FangYaoTang
 * @LastEditTime: 2023-08-16 09:18:17
 * @Copyright: by 南阳迈特网络科技有限公司 禁止任何形式（包含二次开发）转售系统源码，违者必究。
-->


<template>
	<view class="page_content">
		<view class="head_content">
			<CustomNavbar :title="$t('USER.ZC')"></CustomNavbar>
		</view>
		<view class="main_content">
			<view class="logo">
				<image class="image" :src="config.system.company" mode="widthFix"></image>
			</view>
			<view class="input_box">
				<u-form ref="uForm" :model="form" :rules="rules">
					<u-form-item prop="email">
						<view class="input">
							<u-input v-model="form.email" type="text" clearable
								:placeholder="$t('USER.QSRYXZH')"></u-input>
						</view>
					</u-form-item>
					<!-- 		<u-form-item prop="imageCode">
						<view class="input">
							<u-input v-model="form.imagecode" type="number" clearable :placeholder="$t('USER.QSRTXYZM')">
								<template slot="suffix">
									<u-code ref="uCode" uniqueKey="register-code" :keepRunning="true" @change="codeChange" seconds="60" :changeText="$t('USER.qsrt')"></u-code>
										<img class="imagecode"  mode="widthFix" @click="getImageCode" src="http://localhost:9001/api/user/v1/captcha">
								</template>
							</u-input>
						</view>
					</u-form-item> -->
					<u-form-item prop="code">
						<view class="input">
							<u-input v-model="form.code" type="number" clearable :placeholder="$t('USER.QSR4WYZM')">
								<template slot="suffix">
									<u-code ref="uCode" uniqueKey="register-code" :keepRunning="true"
										@change="codeChange" seconds="60" :changeText="$t('USER.MZXHQ')"></u-code>
									<view class="codebtn" @click="getCode">{{ login.codeTips }}</view>
								</template>
							</u-input>
						</view>
					</u-form-item>
					<u-form-item prop="registerPassword">
						<view class="input">
							<u-input v-model="form.registerPassword" type="password" clearable
								:placeholder="$t('USER.QSRZMSZZHDMM')"></u-input>
						</view>
					</u-form-item>
					<u-form-item prop="againPassword">
						<view class="input">
							<u-input v-model="form.againPassword" type="password" clearable
								:placeholder="$t('USER.QZCSRMM')"></u-input>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="button_box">
				<u-button :text="$t('USER.ZC')" :loading="buttonLoading" :customStyle="buttonStyle"
					@click="submitHandle" />
			</view>
			<view class="check_box">
				<u-checkbox-group @change="labelChange">
					<u-checkbox :name="true" :label="$t('USER.YDBTY')" labelSize="28rpx" labelColor="#333"></u-checkbox>
				</u-checkbox-group>
				<text class="text">《{{$t('USER.FWXY')}}》</text>
				<text>和</text>
				<text class="text">《{{$t('USER.YSXY')}}}》</text>
			</view>
			<view class="text_info">
				<text class="text" @click="redirectPath">{{$t('USER.YYZHQDL')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex"
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../../locale/index';
	const {
		t
	} = initVueI18n(messages)
	export default {
		data() {
			return {
				buttonStyle: {
					width: '100%',
					height: '100rpx',
					border: 'none',
					fontSize: '28rpx',
					color: '#fff',
					background: 'linear-gradient(90deg, #2A82E4, #D269FF)',
					borderRadius: '20rpx',
					margin: '0',
					fontWeight: 'bold'
				},
				buttonLoading: false,
				codeUrl: '../../static/images/1700800009370.jpg',
				login: {
					codeTips: '', // 验证码提示文字
					checked: false, // 协议勾选
					platform: this.$utils.platforms(), // 平台(H5 / wxMiniProgram / wxOfficialAccount)
				},
				form: {
					email: '', // 邮箱
					code: '', // 验证码
					imagecode: '', //图像验证码 
					registerPassword: '', // 密码
					againPassword: '', // 确认密码
				},
				rules: {
					email: [{
							required: true,
							message: this.$t('USER.QSRYXZH'),
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.email(value);
							},
							message: this.$t('USER.YXZHBZQ'),
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: this.$t('USER.QSR4WYZM'),
							trigger: ['blur', 'change']
						},
						// { min: 4, max: 6, message: '请输入4~6位验证码', trigger: ['blur', 'change'] }
					],
					registerPassword: [{
							required: true,
							message: this.$t('USER.QSRZMSZZHDMM'),
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 20,
							message: this.$t('USER.MMGSYW'),
							trigger: ['blur', 'change']
						},
						{
							validator: this.$utils.checkPassword,
							trigger: ['change', 'blur']
						}
					],
					againPassword: [{
							required: true,
							message: this.$t('USER.QZCSRMM'),
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								this.$utils.checkAgainPassword(rule, value, callback, this.form.registerPassword)
							},
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		computed: {
			...mapGetters('app', ['config', "share"])
		},
		onLoad() {

		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.uForm.setRules(this.rules)
			})
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			submitHandle() {
				if (!this.login.checked) {
					this.$u.toast(this.$t('USER.QGXBTYXY'))
					return
				}
				this.$refs.uForm.validate().then(res => {
					// const obj = {
					// 	mobile: this.form.mobile,
					// 	code: this.form.code,
					// 	password: this.form.againPassword,
					// 	platform: this.login.platform,
					// 	spm: this.share.spm || '',

					// }
					const obj = {
						"code": this.form.code,
						"pwd": this.form.registerPassword,
						"mail": this.form.email,
					}
					this.registerAccount(obj)
				}).catch(err => {
					console.log(err, this.$t('USER.YZWTG'));
				})
			},
			// 1.注册账号
			registerAccount(obj) {
				this.$request('login.register', obj, false).then(res => {
					if (res.code === 0) {
						this.$u.toast(this.$t('USER.ZCCG'))
						this.getUserInfo(res.data.token)
						this.redirectPath(2)
					}
				})
			},
			// 重定向页面
			redirectPath(count = 1) {
				const page = getCurrentPages()[0];
				if (page.route.indexOf('pages/login/register') == -1) {
					uni.navigateBack({
						delta: Number(count)
					})
				} else {
					uni.switchTab({
						url: '/pages/home/index'
					});
				}
			},
			labelChange(detail) {
				this.login.checked = detail[0] ? detail[0] : false
			},
			codeChange(text) {
				this.login.codeTips = text;
			},
			// 获取图形验证码
			getImageCode() {
				var obj = {};
				this.$request('login.imagecode', obj, false).then(res => {
					this.codeUrl = res;
					//  this.codeUrl = "data:image/gif;base64," + res.data.img;
					//  console.log("2222",res);
				}).catch(err => {

					uni.hideLoading();
					uni.$u.toast(this.$t('USER.TXYZMCW'));
				})
			},
			getCode() { // 获取验证码
				if (!this.form.email) {
					this.$u.toast(this.$t('USER.QSRYXZH'))
					return
				}
				let obj = {
					to: this.form.email,
					captcha: "25"
				}
				console.log(obj);
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: this.$t('USER.ZZHQYZM')
					})
					this.$request('login.sendCode', obj, false).then(res => {
						if (res.code === 0) {
							uni.hideLoading();
							uni.$u.toast(this.$t('USER.YZMYFS'));
							this.$refs.uCode.start();
						} else {
							uni.hideLoading();
							uni.$u.toast(res.msg);
						}
					}).catch(err => {
						uni.hideLoading();
						uni.$u.toast(this.$t('USER.YZMFSSB'));
					})
				} else {
					uni.$u.toast(this.$t('USER.DJSJSHZFS'));
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main_content {
		padding: 60rpx;
		overflow-y: auto;

		.logo {
			width: 100%;
			padding: 40rpx 100rpx 100rpx 100rpx;

			.image {
				width: 100%;
			}

		}

		.imagecode {
			width: 230rpx;
			margin-right: -10px;
		}

		.input_box {
			::v-deep .u-form {
				.u-form-item__body {
					padding: 0 0 40rpx 0 !important;
				}

				.u-form-item__body__right__message {
					margin-left: 0 !important;
					line-height: 1.5em;
					font-size: 28rpx;
					padding: 0 10rpx 20rpx 10rpx;
				}
			}

			.input {
				width: 100%;

				::v-deep .u-input {
					height: 100rpx;
					background: #F7F8F9;
					border-radius: 16rpx;
					border: none;
					padding: 12rpx 24rpx !important;
				}

				.codebtn {
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.button_box {
			margin: 40rpx 0;
		}

		.check_box {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.text {
				color: #583EF2;
			}
		}

		.text_info {
			margin-top: 60rpx;
			text-align: center;

			.text {
				color: #626262;
				font-size: 28rpx;
			}
		}
	}
</style>